import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox,ElMessage } from 'element-plus'

export default {
    name: 'list',
    setup(){
        const tableData = ref([]);
        const router = useRouter()
        

        const getList = ()=>{
            axios.post('/api/setting/list').then(res=>{
                let data = res?.data?.data || {};
                
                tableData.value = Object.entries(data).map(arr => {
                    arr[1].host = arr[0]
                    arr[1].ingress_name = arr[1]?.extra?.ingress_name || "";
                    return arr[1];
                })
            })
        }

        const toEdit = (row)=>{
            router.push(`/setting?group=${row.group}&ingress_name=${row.ingress_name}`);
        }
        const toDelete = (row)=>{
            ElMessageBox.confirm('确定要删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(()=>{
                axios.post('/api/setting/del',{
                    group: row.group,
                }).then(res=>{
                    ElMessage.success('操作成功');
                    getList();
                }).catch(()=>{})
            }).catch(()=>{})
        }

        onMounted(()=>{
            getList();
        })

        return ()=>(<div className='padding-20'>
            <el-table
                data={tableData.value}
                style={{width: '100%'}}
                header-cell-style={{
                    backgroundColor: '#f5f7fa', // 表头背景色
                    color: '#333', // 表头文字颜色
                    fontWeight: 'bold' // 文字加粗
                }}
            >
                <el-table-column
                    prop="host"
                    label="域名"
                />
                <el-table-column
                    label="操作"
                    width="300px"
                    v-slots={{
                        default: (scope)=>(<>
                            <el-button type="primary" text onClick={()=>{toEdit(scope.row)}}>修改</el-button>
                            <el-button type="primary" text onClick={()=>{toDelete(scope.row)}}>删除</el-button>
                        </>)
                    }}
                />
            </el-table>
        </div>)
    }
}